<template>
    <div class="home">
        <header class="tc ">
            <h1 class="title pr pr20 pl20 f35 cfff fn">
               <router-link class="img pa cfff" :to="{
                    name:'confirmOrder',
                    params:{
                        id:this.id,
                        money:this.money,
                        serviceList:this.serviceList,
                        storeInfo:this.storeInfo,
                        carInfo:this.carInfo
                    }
                    }">
                    <i class="el-icon-arrow-left  f40 "></i>
                </router-link>
                选择车辆
            </h1>
        </header>
        <main class="p20">
            <section class="bcfff f20 mb20" v-for="el in arr" >
                <!-- <ul class="p10 flex jcsb"  @click="onBack(el.carType,el.carBrand)"> -->
                <ul class="p10 flex jcsb">
                    <li >
                       <div class="flex ">
                            <img  src="el.images" class="car mr30">
                            <div class="aic">
                                <h2 class="f30 mb30">车型:{{el.carType}}</h2>
                                <p class="f25">车牌:{{el.carBrand}}</p>
                            </div>
                        </div>
                    </li>
                    <li class="asc">
                        <div >
                            <!-- <img class="select" src="../../../assets/img/wash-car-img/right-red.png"> -->
                            <i class="el-icon-success f30 mr5" @click="onHandle(el.carType,el.carBrand,$event)"></i>
                            <!-- <img class="select" src="../../../assets/img/wash-car-img/circle.png"> -->
                        </div>
                    </li>
                </ul>
            </section>
        </main>
        <ul class="footer  bcff bs  tc pf w100 jcsb f20">
            <li>
                <router-link href="#" class="pay-order f25 cfff " to="addCar">
                    <img class="add" src="../../../assets/img/wash-car-img/add.png"> 添加车辆
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
import {myCar} from '@/api/myCard';
export default {
    mounted(){
        this.init();  
    },
    methods:{
        // onBack(type,band){
        //     this.carInfo=type+"/"+band;
        //     console.log(111);
        //     this.$router.push({
        //     name:'confirmOrder',
        //     params:{
        //         id:this.id,
        //         money:this.money,
        //         serviceList:this.serviceList,
        //         storeInfo:this.storeInfo,
        //         carInfo:this.carInfo
        //     }
        //   })
        // },
        onHandle(type,band,e){
            let iArr = document.querySelectorAll('.active');
            if(iArr.length>0){
                iArr[0].classList.remove('active');
                e.target.classList.add('active');
            }else{
                e.target.classList.add('active');
            }
            this.carInfo=type+"/"+band;
        },
        init(){
            this.id = this.$route.params.id;
            this.money = this.$route.params.money;
            this.serviceList = this.$route.params.serviceList;
            this.storeInfo = this.$route.params.storeInfo;
            myCar({
                uid:1
            }).then(r=>{
                this.arr = r.data;
            })
        },
        onback(){

        }
    },
    data(){
        return{
            id:"",
            carInfo:"奔驰FWE4/豫A56487",
            serviceList:[],
            storeInfo:{},
            money:0,
            arr:[]
            
        }
    }
}
</script>
<style scoped>
.active{color: red;}
.mb35{margin-bottom: 35rem;}
.asc{align-self:center;}
.line{height: 1rem;background-color: #f7f7f7;}
.line-dash{border: dashed 2rem;}
.home{background-color: #f7f7f7;}
/* 头部样式  ---需要可剪切 */
header .title{height: 145rem;line-height: 145rem;}
header{height:435rem;background-color: #3385fd;}
header  .img{width: auto;left: 20rem;top: 0;}

main {margin-top: -310rem;}
/* 手机端必须加上这一句--体验感 */
main{margin-bottom: 120rem;}
main section{padding: 40rem 30rem;border-radius: 20rem;box-sizing: border-box;} 
main section ul li img.car {width: 110rem;height: 110rem;border-radius: 50%;}
main section ul li img.select {width: 40rem;height: auto;}
/* 页脚 */
ul.footer{height: 115rem;left: 0; bottom:0;padding: 0 20rem;background-color: #fff;line-height: 115rem; }
ul.footer a.pay-order{background-color: #1e72f0;padding: 20rem 255rem;border-radius: 50rem;}
ul.footer a.pay-order img.add{width: 23rem;height: auto;vertical-align: middle;margin-top: -2rem;}
</style>